<template>
    <div class="common-layout">
        <el-container>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
                <el-tab-pane label="持仓" name="stockHold">
                    <StockHold v-if="activeName === 'stockHold'"></StockHold>
                </el-tab-pane>
                <el-tab-pane label="最近操作" name="lastedOperation">
                    <lasted-operation v-if="activeName==='lastedOperation'"></lasted-operation>
                </el-tab-pane>
                <el-tab-pane label="日志" name="dailyLog">
                    <daily-log v-if="activeName === 'dailyLog'"></daily-log>
                </el-tab-pane>
                <el-tab-pane label="操作统计" name="operationSta">
                    <operaiton-sta v-if="activeName === 'operationSta'"></operaiton-sta>
                </el-tab-pane>
                <el-tab-pane label="持仓分布" name="stockHoldEchart">
                    <stock-hold-echart v-if="activeName === 'stockHoldEchart'"></stock-hold-echart>
                </el-tab-pane>
            </el-tabs>
        </el-container>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import StockHold from '../components/StockHold.vue';
import OperaitonSta from '../components/operation/OperaitonSta.vue';
import LastedOperation from '../components/operation/LastedOperation.vue';
import StockHoldEchart from '../components/stockHold/StockHoldEchart.vue';
import DailyLog from '../components/operation/DailyLog.vue';

document.title = "持仓";

const activeNameKey = "StockHoldActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'stockHold')

const change = (tabName) => {
    sessionStorage.setItem(activeNameKey, tabName)
}
</script>